<div class="home">
    <div class="introduction" [ngClass]="{'introduction-dark': config.dark}">
        <span class="introduction-promo">20M+ DOWNLOADS</span>
        <div class="introduction-title">The Ultimate UI Component Library</div>
        <div class="introduction-subtitle">for Angular</div>

        <a class="action-button" [routerLink]="['/setup']">
            GET STARTED
        </a>
        <img alt="devices" class="introduction-devices" src="assets/showcase/images/home/intro-devices.png" />
    </div>

    <div class="features">
        <h4>Why PrimeNG?</h4>
        <p>Congratulations! <span role="img" aria-label="celebrate" class="p-mx-2">🎉</span> Your quest to find the UI library for Angular is now complete.</p>

        <p class="features-description">PrimeNG is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License. PrimeNG is developed by <a href="http://www.primetek.com.tr">PrimeTek Informatics</a>,
            a vendor with years of expertise in developing open source UI solutions. For project news and updates, please follow us on <a href="https://twitter.com/prime_ng">twitter</a> and visit our <a href="https://www.primefaces.org/category/primeng/">blog</a>.</p>

        <div class="p-grid">
            <div class="p-col-12 p-md-4">
                <div class="feature-card">
                    <img alt="component" src="assets/showcase/images/home/ng-components.png" />
                    <div class="feature-card-detail">
                        <div class="feature-name">80+ COMPONENTS</div>
                        <p>The most complete set of native widgets featuring 80+ easy to use components for all your UI requirements.</p>
                    </div>
                </div>
            </div>
            <div class="p-col-12 p-md-4">
                <div class="feature-card">
                    <img alt="opensource" src="assets/showcase/images/home/ng-opensource.png" />
                    <div class="feature-card-detail">
                        <div class="feature-name">OPEN SOURCE</div>
                        <p>Hosted at <a href="https://github.com/primefaces/primeng">GitHub</a>, all widgets are open source and free to use under MIT license. Feel the power of open source.</p>
                    </div>
                </div>
            </div>
            <div class="p-col-12 p-md-4">
                <div class="feature-card">
                    <img alt="themes" src="assets/showcase/images/home/ng-themes.png" />
                    <div class="feature-card-detail">
                        <div class="feature-name">THEMES</div>
                        <p>Don’t get tied up in just one look&feel. Choose from a variety of options including material and bootstrap design.</p>
                    </div>
                </div>
            </div>
            <div class="p-col-12 p-md-4">
                <div class="feature-card">
                    <img alt="templates" src="assets/showcase/images/home/ng-templates.png" />
                    <div class="feature-card-detail">
                        <div class="feature-name">TEMPLATES</div>
                        <p>Professionally designed highly customizable native Angular CLI application templates to get you started in no time. </p>
                    </div>
                </div>
            </div>
            <div class="p-col-12 p-md-4">
                <div class="feature-card">
                    <img alt="accesibility" src="assets/showcase/images/home/ng-accesibility.png" />
                    <div class="feature-card-detail">
                        <div class="feature-name">ACCESSIBILITY</div>
                        <p>Fully accessible and in compliance with Section 508 standards.</p>
                    </div>
                </div>
            </div>
            <div class="p-col-12 p-md-4">
                <div class="feature-card">
                    <img alt="pro" src="assets/showcase/images/home/ng-pro.png" />
                    <div class="feature-card-detail">
                        <div class="feature-name">PRO SUPPORT</div>
                        <p>With the exclusive services of Pro account, you no longer need to post your questions in the community forum and your issues to community issue tracker.</p>
                    </div>
                </div>
            </div>
            <div class="p-col-12 p-md-4">
                <div class="feature-card">
                    <img alt="productivity" src="assets/showcase/images/home/ng-productivity.png" />
                    <div class="feature-card-detail">
                        <div class="feature-name">PRODUCTIVITY</div>
                        <p>Allocate your valuable time on business logic rather than dealing with the complex user interface requirements.</p>
                    </div>
                </div>
            </div>
            <div class="p-col-12 p-md-4">
                <div class="feature-card">
                    <img alt="community" src="assets/showcase/images/home/ng-community.png" />
                    <div class="feature-card-detail">
                        <div class="feature-name">COMMUNITY</div>
                        <p>Join PrimeNG community to become a part of an active, vibrant and growing open source foundation.</p>
                    </div>
                </div>
            </div>
            <div class="p-col-12 p-md-4">
                <div class="feature-card">
                    <img alt="mobile" src="assets/showcase/images/home/ng-mobile.png" />
                    <div class="feature-card-detail">
                        <div class="feature-name">MOBILE</div>
                        <p>Enhanced mobile user experience with touch optimized responsive design elements.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="whouses">
        <h4>User Community</h4>
        <p>The creator of PrimeNG is <a href="https://www.primetek.com.tr">PrimeTek Informatics</a>, the distinguished component library vendor who built popular open source projects such as PrimeFaces, PrimeNG and PrimeReact over the past years.</p>
        <div class="p-grid">
            <div class="p-col-6 p-md-2"><img src="assets/showcase/images/home/airbus.svg"></div>
            <div class="p-col-6 p-md-2"><img src="assets/showcase/images/home/amex.svg"></div>
            <div class="p-col-6 p-md-2"><img src="assets/showcase/images/home/nvidia.svg"></div>
            <div class="p-col-6 p-md-2"><img src="assets/showcase/images/home/ebay.svg"></div>
            <div class="p-col-6 p-md-2"><img src="assets/showcase/images/home/ford.svg"></div>
            <div class="p-col-6 p-md-2"><img src="assets/showcase/images/home/fox.svg"></div>
            <div class="p-col-6 p-md-2"><img src="assets/showcase/images/home/lufthansa.svg"></div>
            <div class="p-col-6 p-md-2"><img src="assets/showcase/images/home/mercedes.svg"></div>
            <div class="p-col-6 p-md-2"><img src="assets/showcase/images/home/sap.svg"></div>
            <div class="p-col-6 p-md-2"><img src="assets/showcase/images/home/unicredit.svg"></div>
            <div class="p-col-6 p-md-2"><img src="assets/showcase/images/home/verizon.svg"></div>
            <div class="p-col-6 p-md-2"><img src="assets/showcase/images/home/viacom.svg"></div>
        </div>

        <h4>Testimonials</h4>
        <div class="p-grid">
            <div class="p-col-12 p-md-4">
                <img src="assets/showcase/images/home/quote.svg">
                <p>"We have selected PrimeNG among the others because we feel it’s currently the most mature and complete Angular library out there! We were simply searching the component library not a directive library."</p>
                <i>Frank Kolar - SAP Ariba</i>
            </div>
            <div class="p-col-12 p-md-4">
                <img src="assets/showcase/images/home/quote.svg">
                <p>"PrimeNG! They keep adding new features/components and stay current with Angular releases. Haven’t found a UI problem I couldn’t solve with their library."</p>
                <i>Chris Kelley</i>
            </div>
            <div class="p-col-12 p-md-4">
                <img src="assets/showcase/images/home/quote.svg">
                <p>"Some awesome components are available in PrimeNG and personally prefer this than Google Material."</p>
                <i>Saravana Kumar</i>
            </div>
            <div class="p-col-12 p-md-4">
                <img src="assets/showcase/images/home/quote.svg">
                <p>"We released our application, written with Angular and PrimeNG, last week. All the users said that they loved it, especially dragdrop feature of file upload component of PrimeNG."</p>
                <i>Bunyamin Coskuner</i>
            </div>
            <div class="p-col-12 p-md-4">
                <img src="assets/showcase/images/home/quote.svg">
                <p>"When I found your components it was like the Sun came out after a year of pouring rain. Thanks and congratulations."</p>
                <i>Gerard Lanphear</i>
            </div>
            <div class="p-col-12 p-md-4">
                <img src="assets/showcase/images/home/quote.svg">
                <p>"Hearty thanks PrimeNG. Perfect angular components."</p>
                <i>Ramprit Sahani</i>
            </div>
            <div class="p-col-12 p-md-4">
                <img src="assets/showcase/images/home/quote.svg">
                <p>"Thank you PrimeNG for beautiful Angular components."</p>
                <i>Santhosh Krisnamurthy</i>
            </div>
            <div class="p-col-12 p-md-4">
                <img src="assets/showcase/images/home/quote.svg">
                <p>"Fantastic framework that gives you a lot of options and tools for your solution or prototype."</p>
                <i>Benjamin Andersen</i>
            </div>
            <div class="p-col-12 p-md-4">
                <img src="assets/showcase/images/home/quote.svg">
                <p>"Did I ever mention how much I love PrimeNG."</p>
                <i>Fikaye Adepoju</i>
            </div>
        </div>
    </div>

    <div class="templates">
        <h4>Premium Application Templates</h4>
        <p>Gorgeous Angular-CLI application templates designed by professional designers and implemented by Angular Experts to help you reach your goals in no time.</p>

        <div class="p-grid">
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/diamond-ng">
                    <img alt="Mirage" src="assets/showcase/images/layouts/diamond-ng.png">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/mirage-ng">
                    <img alt="Mirage" src="assets/showcase/images/layouts/mirage-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/prestige-ng">
                    <img alt="Prestige" src="assets/showcase/images/layouts/prestige-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/sapphire-ng">
                    <img alt="Sapphire" src="assets/showcase/images/layouts/sapphire-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/roma-ng">
                    <img alt="Roma" src="assets/showcase/images/layouts/roma-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/babylon-ng">
                    <img alt="Babylon" src="assets/showcase/images/layouts/babylon-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/olympia-ng">
                    <img alt="Olympia" src="assets/showcase/images/layouts/olympia-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/california-ng">
                    <img alt="California" src="assets/showcase/images/layouts/california-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/ecuador-ng">
                    <img alt="Ecuador" src="assets/showcase/images/layouts/ecuador-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/harmony-ng">
                    <img alt="Harmony" src="assets/showcase/images/layouts/harmony-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/apollo-ng">
                    <img alt="Apollo" src="assets/showcase/images/layouts/apollo-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/serenity-ng">
                    <img alt="Serenity" src="assets/showcase/images/layouts/serenity-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/avalon-ng">
                    <img alt="Avalon" src="assets/showcase/images/layouts/avalon-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/verona-ng">
                    <img alt="Verona" src="assets/showcase/images/layouts/verona-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/manhattan-ng">
                    <img alt="Manhattan" src="assets/showcase/images/layouts/manhattan-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/paradise-ng">
                    <img alt="Paradise" src="assets/showcase/images/layouts/paradise-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/ultima-ng">
                    <img alt="Ultima" src="assets/showcase/images/layouts/ultima-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/barcelona-ng">
                    <img alt="Barcelona" src="assets/showcase/images/layouts/barcelona-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/morpheus-ng">
                    <img alt="Morpheus" src="assets/showcase/images/layouts/morpheus-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/atlantis-ng">
                    <img alt="Atlantis" src="assets/showcase/images/layouts/atlantis-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/poseidon-ng">
                    <img alt="Poseidon" src="assets/showcase/images/layouts/poseidon-ng.jpg">
                </a>
            </div>
            <div class="p-col-12 p-md-3">
                <a href="https://www.primefaces.org/layouts/omega-ng">
                    <img alt="Omega" src="assets/showcase/images/layouts/omega-ng.jpg">
                </a>
            </div>
        </div>

        <div class="why-templates">
            <div class="p-grid">
                <div class="p-col-12 p-md-6">
                    <p>PrimeNG offers premium Angular CLI templates designed by our professional design team and implemented by the PrimeNG team.
                     Various other 3rd party Angular templates are actually ports from other technologies and they bring the burden of a <strong>dependency hell</strong>.
                     PrimeNG templates on the other hand utilize native Angular APIs, distributed as a CLI project, have a single dependency that is PrimeNG featuring top notch quality resulting in easier maintenance and unified look. 
                     Wondering about how PrimeNG premium templates are implemented? Check out the <a href="https://github.com/primefaces/primeng-blueprint">primeng-blueprint</a> project at GitHub and the <a href="https://www.primefaces.org/primeng-blueprint">live demo</a> for details.</p>
                
                    <div class="p-grid">
                        <div class="p-col-12 p-md-6">
                            <h5>PrimeNG</h5>
                            <ul>
                                <li>Single Dependency: PrimeNG</li>
                                <li>Developed by a Single Vendor</li>
                                <li>Unlimited Free Support and Updates</li>
                                <li>Implemented as a native Angular application</li>
                                <li>Updated periodically</li>
                            </ul>
                        </div>
                        <div class="p-col-12 p-md-6">
                            <h5>Others</h5>
                            <ul>
                                <li>Multiple 3rd Party Dependencies</li>
                                <li>Dependencies from different vendors</li>
                                <li>Paid Support</li>
                                <li>Wrapper of another technology e.g. jQuery</li>
                                <li>No clear release cycle of updates</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="p-col-12 p-md-6 p-text-center">
                    <img alt="Why You Should PrimeNG" src="assets/showcase/images/home/why.png" class="section-image">
                </div>
            </div>
        </div>
    </div>

    <div class="primeng-designer">
        <h3>PrimeNG Designer API</h3>
        <div class="p-grid">
            <div class="p-col-12 p-md-6">
                <p>PrimeNG is a design-agnostic library and the theming system is based on the Theme Designer, the official tool to create themes for the components. Designer includes a SASS enabled infrastructure that has over 500 customizable variables, a live editor
                    and a Angular-CLI application to test your themes with ease along with built-in theme samples that are embedded in PrimeNG Core.</p>

                <p>Visit <a href="https://www.primefaces.org/designer/primeng">Designer API HomePage</a> for more information, live demos and access to a trial version.</p>
            </div>
            <div class="p-col-12 p-md-6 p-text-center">
                <img alt="PrimeNG Designer" src="assets/showcase/images/designer.png" class="section-image">
            </div>
        </div>
    </div>

    <div class="lts">
        <div class="p-grid">
            <div class="p-col-12 p-md-6">
                <h3 class="pro-title">PrimeNG Long Term Support</h3>
                <p>LTS Support ensures stability, premium quality and advanced security for the prior versions.</p>
                <p>PrimeNG LTS is an annual subscription based service to provide a license for the finest compatible version suited to you.</p>
                <a class="action-button" [routerLink]="['./lts']">LEARN MORE</a>
            </div>
            <div class="p-col-12 p-md-6 p-text-center">
                <img alt="LTS" src="assets/showcase/images/lts.png" class="section-image">
            </div>
        </div>
    </div>

    <div class="prosupport">
        <div class="p-grid">
            <div class="p-col-12 p-md-6">
                <h3 class="pro-title">PrimeNG PRO Support</h3>
                <p>With PrimeNG PRO, it's easy to support, tune and add features to PrimeNG as if it were an in-house framework.</p>
                <p>PrimeNG PRO is a term based commercial support service. With the exclusive services of a Pro account, you no longer need to post your questions in the community forum and your issues to community issue tracker.</p>
                <a class="action-button" [routerLink]="['./support']">LEARN MORE</a>
            </div>
            <div class="p-col-12 p-md-6 p-text-center">
                <img alt="PRO" src="assets/showcase/images/pro.png" class="section-image">
            </div>
        </div>
    </div>
</div>
